import { useEffect, useState } from 'react';
import classnames from 'classnames';
import { View } from '@tarojs/components';
import styles from './index.module.scss';

export interface BaseModalProps {
  show: boolean,
  onMaskClick?: () => void,
  children?: any
}

/**
 * Modal组件，用于展示模态窗口。
 * @param props 包含组件的基本属性，如是否显示（show），子元素（children），点击遮罩的回调（onMaskClick）。
 * @returns 返回模态窗口的JSX元素或null（根据是否显示）。
 */

function Modal(props: BaseModalProps) {
  const {show, children, onMaskClick} = props;
  const [display, setDisplay] = useState(false);

  const cls = classnames({
    [styles.mask]: true,
    [styles.in]: show,
    [styles.out]: !show,
  });

  const onAnimationEnd = () => {
    !show && setDisplay(false);
  };

  useEffect(() => {
    show && setDisplay(true);
  }, [show]);

  if (!display) {
    return null;
  }

  return (
    <>
      <View
        className={cls}
        onAnimationEnd={onAnimationEnd}
        onClick={onMaskClick}
      >
      </View>
      <View>{children}</View>
    </>

  );
}

export default Modal;